<!DOCTYPE HTML>
<html>

<head>
  <title>
    售后退单详情</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
  <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
  <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
  <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
  <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="detail-page span24">
      <div class="detail-page-title">
        <h4>售后退单详情
          <button type="button" id="cancel-list-btn" class=" pull-right jx-btn">返回</button>
        </h4>
      </div>
      <div class="detail-section">
        <div class="row detail-row">
          <div class="span24">
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="4">售后退单基础信息</td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">售后退单号：</label>
                </td>
                <td colspan="3">
                  6080240000608
                </td>
              </tr>
              <tr>
                <td>
                  <label class="pull-right">订单号：</label>
                </td>
                <td>
                  6745764149713
                </td>
                <td>
                  <label class="pull-right">订单状态：</label>
                </td>
                <td>
                  待发货
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">订单类型：</label>
                </td>
                <td>分销订单
                </td>
                <td width="150">
                  <label class="pull-right">自定义订单号：</label>
                </td>
                <td>6578641546185
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">售后状态：</label>
                </td>
                <td colspan="3">待审核
                  <button type="button" id="revokebtnShow" class="ml-10 pull-right button button-primary">
                                    撤销
                                </button>
                  <button type="button" id="refusebtnShow" class="ml-10 pull-right button button-primary">
                                    拒绝
                                </button>
                  <button type="button" id="passAuditbtnShow" class="ml-10 pull-right button button-primary">审核确定
                                </button>
                  <button type="button" id="salesLogbtnShow" class="pull-right button button-primary">
                                    售后日志
                                </button>
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">申请时间：</label>
                </td>
                <td colspan="3">2038-01-19 11:14:00
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">售后备注：</label>
                </td>
                <td colspan="3">
                  <button type="button" id="remarksbtnShow" class="pull-right button button-primary">备注
                                </button>
                </td>
              </tr>
            </table>
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="4"> 供货商信息</td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">供应商：</label>
                </td>
                <td> 锐力体育</td>
                <td width="150">
                  <label class="pull-right">仓库地址：</label>
                </td>
                <td> 上海二仓</td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">供应商编码：</label>
                </td>
                <td> J1980319211</td>
                <td width="150">
                  <label class="pull-right">库存管理方式：</label>
                </td>
                <td> 激想维护</td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">自定义仓库编码：</label>
                </td>
                <td> J1980319211</td>
                <td width="150">
                  <label class="pull-right">激想仓库编码：</label>
                </td>
                <td> 017</td>
              </tr>
            </table>
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="4">
                  售后用户信息
                </td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">下单用户ID：</label>
                </td>
                <td>
                  4151451
                </td>
                <td width="150">
                  <label class="pull-right">下单帐号：</label>
                </td>
                <td>
                  15900684377
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">下单用户类型：</label>
                </td>
                <td>
                  企业
                </td>
                <td width="150">
                  <label class="pull-right">用户等级：</label>
                </td>
                <td>
                  F2
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">下单者名称：</label>
                </td>
                <td></td>
                <td width="150">
                  <label class="pull-right">下单企业名称：
                                </label>
                </td>
                <td> 上海激想体育文化股份有限公司</td>
              </tr>
            </table>
            <!-- 表格 start-->
            <div>
              <div class="grid-header"> 售后商品</div>
              <div id="grid"></div>
            </div>
            <!-- 表格 end-->
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="2">
                  售后原因
                </td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">售后原因：</label>
                </td>
                <td> 缺货
                </td>
              </tr>
              <!--  用户上传图片 -->
              <tr>
                <td width="150">
                  <label class="pull-right">图片：</label>
                </td>
                <td>
                  <img src="../../../assets/img/u9486.png" height="135" width="159">
                  <img src="../../../assets/img/u9486.png" height="135" width="159">
                  <img src="../../../assets/img/u9486.png" height="135" width="159">
                </td>
              </tr>
            </table>
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="4">
                  回寄物流信息
                </td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">物流公司：</label>
                </td>
                <td>
                </td>
                <td width="150">
                  <label class="pull-right">运单号：</label>
                </td>
                <td>
                </td>
              </tr>
            </table>
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="2">
                  付款信息
                </td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">支付方式：</label>
                </td>
                <td>
                  线上快捷支付
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">支付通道：</label>
                </td>
                <td>
                  微信
                </td>
              </tr>
              <tr>
                <td width="150">
                  <label class="pull-right">交易号：</label>
                </td>
                <td>
                  471757615717401750715
                </td>
              </tr>
            </table>
            <table id="" class="table table-header table-condensed table-bordered">
              <thead>
                <td colspan="2">
                  退款信息
                </td>
              </thead>
              <tr>
                <td width="150">
                  <label class="pull-right">可退金额：</label>
                </td>
                <td>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 初始隐藏 passAuditDialog内容 -->
  <div id="passAudit" class="hide">
    <form id="passAuditform" class="form-horizontal">
      <div class="row">
        <div class="control-group span12">
          <label class="control-label">商品金额：</label>
          <div class="controls">
            <span class="control-text">395.00</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span12 ">
          <label class="control-label">可退金额：</label>
          <div class="controls">
            <input type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
          </div>
          <span class="grey" style="margin-left:10px">(注：可退金额不得高于商品金额)</span>
        </div>
      </div>
      <div class="row">
        <div class="control-group  span12">
          <label class="control-label">退货地址：</label>
          <div id="address" class="controls" style="height:auto">
            <ul>
              <li>
                <label class="radio"><input name="manage" value="0" type="radio">上海市浦东新区2777号 </label>
              </li>
              <li>
                <label class=" radio"><input name="manage" value="0" type="radio">上海市浦东新区2777号 </label>
              </li>
              <li>
                <label class=" radio"><input name="manage" value="0" type="radio">上海市浦东新区2777号 </label>
              </li>
              <li>
                <label class="radio"><input name="manage" value="0" type="radio">上海市浦东新区2777号 </label>
              </li>
              <li>
                <label class=" radio"><input name="manage" value="0" type="radio">上海市浦东新区2777号 </label>
              </li>
              <li>
                <label class=" radio"><input name="manage" value="0" type="radio">上海市浦东新区2777号 </label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group offset3">
          <div class="controls" style="margin-top:10px">
            <label class="control-label"> <button type="button" id="add-address-btn" class="jx-btn btn-default">新增退货地址</button></label>
          </div>
        </div>
      </div>
    </form>
  </div>
  <!-- 初始隐藏 remakesDialog内容 -->
  <div id="remarks" class="hide">
    <form class="form-horizontal">
      <div id="remarksform" class="row">
        <div class="control-group span12">
          <label class="control-label">备注：</label>
          <div class="control-row4 ">
            <textarea class="input-large" type="text"></textarea>
          </div>
        </div>
        <span class="grey offset2"> 注：售后备注用户不可见</span>
      </div>
    </form>
  </div>
  <!-- 初始隐藏 refuseDialog内容 -->
  <div id="refuse" class="hide">
    <form class="form-horizontal">
      <div id="refuseform" class="row">
        <div class="control-group span12">
          <label class="control-label">原因：</label>
          <div class="control-row4 ">
            <textarea class="input-large" type="text"></textarea>
          </div>
        </div>
      </div>
    </form>
  </div>
  <!-- 初始隐藏 revokeDialog内容 -->
  <div id="revoke" class="hide">
    <form class="form-horizontal">
      <div id="revokeform" class="row">
        <div class="control-group span12">
          <label class="control-label">留言：</label>
          <div class="control-row4 ">
            <textarea class="input-large" type="text"></textarea>
          </div>
        </div>
      </div>
    </form>
  </div>
  <!-- 初始隐藏 salesLogDialog内容 -->
  <div id="salesLog" class="hide">
    <form id="salesLogform" class="form-horizontal">
      <div class="row">
        <div class="control-group span12 offset2">
          <label class="control-label">
                    自定义订单号： </label>
          <div class="controls">
            <input type="text" data-rules="{required:true,number:true}" class="input-normal control-text">
          </div>
        </div>
      </div>
    </form>
  </div>
  <!-- 初始隐藏 addressDialog内容 -->
  <div id="address" class="hide">
    <form id="addressForm" class="form-horizontal">
      <div class="row">
        <div class="control-group span12">
          <label class="control-label"> 发货地：</label>
          <div class="controls bui-form-group-select" data-type="city">
            <select class="input-small">
                                        <option>省份</option>
                                    </select>&nbsp;&nbsp;省&nbsp;&nbsp;
            <select class="input-small">
                                        <option>城市</option>
                                    </select>&nbsp;&nbsp;市&nbsp;&nbsp;
            <select class="input-small">
                                        <option>区</option>
                                    </select>&nbsp;&nbsp;区&nbsp;&nbsp;
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span16">
          <label class="control-label">详细地址：</label>
          <div class="controls">
            <input type="text" data-rules="{required:true}" class="input-large control-text">
          </div>
        </div>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
  <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
  <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');
  </script>
  <script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/overlay', 'bui/form'], function (Grid, Data, Search, Overlay,
      Form) {
      var Grid = Grid,
        Store = Data.Store,
        columns = [{
          title: '商品货号',
          dataIndex: 'a',
          elCls: 'center', //居中
          width: 100
        }, {
          title: '商品品牌',
          dataIndex: 'b',
          elCls: 'center', //居中
          width: 100
        }, {
          title: '品类',
          elCls: 'center',
          dataIndex: 'c',
          width: 100
        }, {
          title: '商品名称',
          elCls: 'center',
          dataIndex: 'd',
          width: 200
        }, {
          title: '商品等级',
          elCls: 'center',
          dataIndex: 'r',
          width: 80
        }, {
          title: '商品系列',
          elCls: 'center',
          dataIndex: 's',
          width: 100
        }, {
          title: '颜色',
          elCls: 'center',
          dataIndex: 'e',
          width: 100
        }, {
          title: '规格',
          elCls: 'center',
          dataIndex: 'f',
          width: 100
        }, {
          title: '条形码',
          elCls: 'center',
          dataIndex: 'h',
          width: 100
        }, {

          title: '数量',
          elCls: 'center',
          dataIndex: 'g',
          width: 100
        }, {

          title: '均摊销售价',
          elCls: 'center',
          dataIndex: 'i',
          width: 100
        }, {

          title: '小计',
          elCls: 'center red',
          dataIndex: 'j',
          width: 200
        }],
        data = [{
          id: 1,
          a: 'Adidas',
          b: '服饰',
          c: '鞋子',
          d: 'ESSENTIAL STAR 2',
          e: ' 统色',
          f: '成人',
          g: '2015',
          h: '男款',
          i: '699.00',
          j: '453.00',
          r: 'A',
          s: '运动系列'
        }, {
          id: 2,
          a: 'Adidas',
          b: '服饰',
          c: '鞋子',
          d: 'ESSENTIAL STAR 2',
          e: ' 统色',
          f: '成人',
          g: '2015',
          h: '男款',
          i: '699.00',
          j: '453.00',
          r: 'A',
          s: '运动系列'
        }];

      //初始化数据
      var store = new Store({ //初始化数据
          data: data,
          pageSize: 2 // 配置分页数目
        }),
        grid = new Grid.Grid({
          render: '#grid',
          elCls: 'small-bui-grid-table mb-20',
          columns: columns,
          loadMask: true, //加载数据时显示屏蔽层
          bbar: {
            elCls: 'span24 offset7',
            items: [{
              // items:工具栏的项， 可以是按钮(bar-item-button)、 文本(bar-item-text)、 默认(bar-item)、 分隔符(bar-item-separator)以及自定义项 
              xclass: 'bar-item-text',
              text: '<div style=" ">均摊销售价 ＝ 商品会员折扣价 ＊ (订单人工减免 ／ 折后商品总额)</div>'
            }]

          },
          store: store
        });
      grid.render();
      //售后日志表格
      var dialogStore = Data.Store,
        dialogcolumns = [{
          title: '售后状态',
          dataIndex: 'a',
          width: 100
        }, {
          title: '操作时间',
          dataIndex: 'b',
          width: 100
        }, {
          title: '备注',
          dataIndex: 'c',
          width: 200
        }, {
          title: '操作人',
          dataIndex: 'd',
          width: 100
        }],
        dialogdata = [{
          a: '申请时间',
          b: '2016-03-13 11:11:11',
          c: '',
          d: ''
        }];

      var dialogstore = new dialogStore({
          data: dialogdata,
          autoLoad: true
        }),
        dialoggrid = new Grid.Grid({
          forceFit: true, // 列宽按百分比自适应
          elCls: 'small-bui-grid-table mb-20',
          columns: dialogcolumns,
          store: dialogstore
        });

      //售后日志
      var salesLogDialog = new Overlay.Dialog({
        title: '售后日志',
        width: 800,
        height: 400,
        //配置DOM容器的编号
        children: [dialoggrid],
        childContainer: '.bui-stdmod-body',
        success: function () {
          //点击成功时候操作

          //  this.close();
        }
      });
      $('#salesLogbtnShow').on('click', function () {
        salesLogDialog.show();
      });
      var passAuditDialog = new Overlay.Dialog({
        title: '可退金额',
        width: 550,
        //配置DOM容器的编号
        contentId: 'passAudit',

        success: function () {
          //点击成功时候操作 
          var form = new Form.Form({
            srcNode: '#passAuditform'
          }).render();
          form && form.submit();
          this.close();
        }
      });
      $('#passAuditbtnShow').on('click', function () {
        passAuditDialog.show();
      });
      //撤销
      var revokeDialog = new Overlay.Dialog({
        title: '撤销留言',
        width: 500,
        //配置DOM容器的编号
        contentId: 'revoke',
        success: function () {
          //点击成功时候操作
          this.close();
        }
      });
      $('#revokebtnShow').on('click', function () {
        revokeDialog.show();
      });
      //备注
      var remarksDialog = new Overlay.Dialog({
        title: '售后备注',
        width: 500,
        //配置DOM容器的编号
        contentId: 'remarks',
        success: function () {
          //点击成功时候操作
          this.close();
        }
      });
      $('#remarksbtnShow').on('click', function () {
        remarksDialog.show();
      });
      //拒绝
      var refuseDialog = new Overlay.Dialog({
        title: '拒绝原因',
        width: 500,
        //配置DOM容器的编号
        contentId: 'refuse',
        success: function () {
          //点击成功时候操作
          this.close();
        }
      });
      $('#refusebtnShow').on('click', function () {
        refuseDialog.show();
      });

      $("#cancel-list-btn").click(function () {
        top.topManager.closePage();
      });
      //新增地址
      var addressDialog = new Overlay.Dialog({
        title: '新增地址',
        width: 600,
        //配置DOM容器的编号
        contentId: 'address',

        success: function () {
          //点击成功时候操作
        //  this.close();
        }
      });
      $('#add-address-btn').on('click', function () {
        addressDialog.show();
      });
      addressForm = new Form.Form({
        srcNode: '#addressForm'
      });
      addressForm.render();



    });
  </script>

  <body>

</html>